<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>JSARToolKit5 examples</title>
		<style>
			html, body {
				background: #fff;
				color: #000;
				font-family: sans-serif;
			}
			.example {
				display: inline-block;
				width: 260px;
				min-height: 120px;
				padding: 20px;
				border: 1px solid #ccc;
				vertical-align: top;
				margin: 10px;
			}
		</style>
	</head>

	<body>

		<h2>Three.js examples</h2>

		<div class="example">
			<a href="barcode_threejs.html">
				Barcode tracking
			</a>
			<p>Uses device camera.
			<p>Use <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a>
		</div>

		<div class="example">
			<a href="pattern_threejs.html">
				Pattern marker tracking
			</a>
			<p>Uses device camera.
			<p>Use <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Hiro%20pattern.pdf">Hiro pattern</a> and <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf">Kanji pattern</a>
		</div>

		<div class="example">
			<a href="pattern_and_barcode_threejs.html">
				Mixed pattern and barcode marker tracking
			</a>
			<p>Uses device camera.
			<p>Use
			<a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/5.png">3x3 marker id 5</a>,
			<a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Matrix%20code%203x3%20(72dpi)/20.png">3x3 marker id 20</a>,
			<a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Hiro%20pattern.pdf">Hiro pattern</a> and <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf">Kanji pattern</a>
		</div>

		<div class="example">
			<a href="multimarker_barcode_threejs.html">
				Barcode multimarker tracking
			</a>
			<p>Uses device camera.
			<p>Use <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Multi%20pattern%204x3%20(A4).pdf">Multi pattern 4x3</a>
		</div>

		<div class="example">
			<a href="multimarker_pattern_threejs.html">
				Pattern multimarker tracking
			</a>
			<p>Uses device camera.
			<p>Use <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Multi%20pattern%20(template%2C%20A4).pdf">Multi pattern (template)</a>
		</div>

		<div class="example">
			<a href="threejs_from_scratch.html">
				Three.js example without helper API
			</a>
			<p>Uses pre-recorded video.
			<p>Not interactive. Draws a cube on top of last detected marker square.
		</div>

        <h2>Babylon.js examples</h2>

        <div class="example">
            <a href="babylonjs_from_scratch.html">
                Babylon.js example without helper API
            </a>
            <p>Uses pre-recorded video.
            <p>Not interactive. Draws a cube on top of last detected marker square.
        </div>

		<h2>NFT Examples</h2>

		<div class="example">
			<a href="nft_improved_worker/">
				nft examples by misdake
			</a>
			<p> nft improved worker examples by misdake
		</div>

		<h2>Canvas debug examples</h2>

		<div class="example">
			<a href="simple_image.html">
				Image debug marker detection
			</a>
			<p>Runs AR marker detection on images.
			<p>Not interactive.
		</div>

		<div class="example">
			<a href="simple_video.html">
				Video debug marker detection
			</a>
			<p>Uses pre-recorded video.
			<p>Not interactive.
		</div>

		<div class="example">
			<a href="simple_rtc.html">
				Camera debug marker detection
			</a>
			<p>Uses device camera.
			<p>Displays detected potential marker squares in debug output.
		</div>

		<h2>Wasm esamples</h2>

		<div class="example">
			<a href="simple_image_wasm.html">
				Image debug marker detection with Wasm
			</a>
			<p>Runs AR marker detection on images (with Wasm).
			<p>Not interactive.
		</div>

		<div class="example">
			<a href="simple_video_wasm.html">
				Video debug marker detection with Wasm
			</a>
			<p>Uses pre-recorded video (with Wasm).
			<p>Not interactive.
		</div>

		<div class="example">
			<a href="nft_threejs_wasm.html">
				nft with threejs and Wasm
			</a>
			<p>Using NFT with three.js and Wasm (and no webworker)
			<p>Use this <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/Marker%20images/pinball.jpg">Pinball image</a>
				as marker.
		</div>



    </body>

</html>
